.gd {
    width: 350px;
    height: 700px;
    background-color: #5e6160;
    margin: 0 auto;
}

.gd p {
    border: 1px white dashed;
    margin-bottom: 150px;
    position: relative;
    animation-name: exp;
    animation-duration: 0s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

}

.gd div {
    border: 1px red dashed;
    margin-top: 150px;
}

@keyframes exp {
    from {
        top: 0;
    }
    to {
        top: 150px;
    }
}

.line{
    position: relative;
}

.lineL::after{
    position: absolute;
    top: -10px;
    left: 70px;
    content: '';
    width: 60px;
    height: 20px;
    border-radius: 15px;
    background-color: orange;
}

.lineR::after{
    position: absolute;
    top: -10px;
    right: 70px;
    content: '';
    width: 60px;
    height: 20px;
    border-radius: 15px;
    background-color: dodgerblue;
}


#songDD{
    /*margin: 100px auto;*/
    border: 1px #ff752e dashed;
    width: 800px;
    height: 120px;
    overflow-x: scroll;
    padding: 0;
    position: absolute;
    top: 5px;
    right: 30%;
    transform: translate(-40%,0);
    transform: rotate(180deg)
}

#song{
    display: inline-block;
}

#song p{
    position: relative;
    border: 1px red solid;
    width: 50px;
    height: 50px;
    float: right;
    display: inline-block;
}

#song p::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

#song .lineE::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: red;
}

#song .lineS::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: greenyellow;
}

#song2{
    display: none;
}